<template>
  <div class="home">
    我是home组件
    {{ $store.state.num }}
    {{ num }}
    <router-link to="/news">到新闻页</router-link>
    <button @click="add">+</button>
    <button @click="reduce">-</button>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions} from 'vuex'
export default {
  name: "Home",
  mounted() {
    console.log(this.$store);
    console.log(mapMutations(['addNum','reduceNum']))
  },
  data() {
    return {
      msg: "你好"
    };
  },
  methods: {
    add() {
      // this.addNum();
      // this.$store.commit("addNum",{num1:2,num2:3})
      // this.addNum({ num1:2,num2:5 });
      // this.$store.dispatch('add_num');
      this.add_num();
    },
    reduce() {
      this.reduceNum();
    },
    ...mapMutations(['addNum','reduceNum']),
    ...mapActions(['add_num'])
  },
  // computed:mapState(['num'])
  computed:{
    ...mapState(['num'])
  }
  /* 
  computed:{
    num(){
      return this.$store.state.num
    }
  }
  */
};
</script>

<style>
.home {
  color: red;
}
</style>